<template>
    <div class="rightView">
        <transition name="animationRL">
            <div style="display: flex;flex-direction: row" v-show="shows">
                <div style="display: flex;flex-direction: column">
                    <div class="container height295">
                        <div class="container_title1">
                            <span>园区党组织架构</span>
                        </div>
                        <el-scrollbar class="scroll-container height220">
                            <div v-for="(item, index) in deptOrganizeData" :key="index">
                                <div class="container_frameworkTitle" @click="partyClick(item)">
                                    <span>{{ item.title }}</span>
                                    <div class="container_frameworkTitle_icon"></div>
                                </div>
                                <div class="container_frameworkContent" v-for="(cItem, index) in item.children"
                                     :key="index">
                                    <span class="container_frameworkC">{{ cItem.title }}</span>
                                    <div style="display: flex;margin-left: auto;width: 40% ">
                                        <span class="container_frameworkName" style="color: #FFFFFF">人数：</span>
                                        <span class="container_frameworkName" style="color: #1CF0BC">{{
                                            cItem.total
                                            }}人</span>
                                    </div>
                                </div>
                            </div>
                        </el-scrollbar>
                    </div>
                    <div class="container height295">
                        <div class="container_title1">
                            <span>党群动态</span>
                        </div>
                        <!--        <el-scrollbar class="scroll-container height220">-->
                        <div class="seamlessStyle">
                            <vue-seamless-scroll
                                    :data="partyHomeData.records"
                                    :class-option="classOption">
                                <div class="container_dynamic" v-for="(item,index) in partyHomeData.records"
                                     :key="index"
                                     @click="newsClick(item)">
                                    <el-image class="container_dynamic_img" :src='item.cover' :class="item.cover ? '' : 'img-bg'"
                                              fit="scale-down"></el-image>
                                    <span class="container_dynamic_title" style="cursor: pointer">{{
                                        item.title
                                        }}</span>
                                </div>
                            </vue-seamless-scroll>
                        </div>
                    </div>
                </div>
                <div style="display: flex;flex-direction: column">
                    <div class="container height250">
                        <div class="container_title1">
                            <span>党组织登录率</span>
                        </div>
                        <div class="loginRateStyle" ref="loginRateEcharts"></div>
                    </div>
                    <div class="container height322">
                        <div class="container_title1">
                            <span>党费缴纳</span>
                        </div>
                        <div class="paymentStyle" ref="paymentEcharts"></div>
                    </div>
                </div>
            </div>
        </transition>
        <div class="shrink" @click="shows=!shows"></div>
    </div>
</template>

<script>
import pieEcharts from "echarts";
import * as echarts from "echarts";
import {partyHome, loginRate, feeCollection, deptOrganize} from "@/api/partybuilding/axios";

export default {
    name: "floatRight",
    data() {
        return {
            shows: true,
            partyHomeData: {'records': []},//党群动态
            loginRateData: [],//登录率
            feeCollectionData: [],//党费
            deptOrganizeData: [],//园区架构
        }
    },
    mounted() {
        this.loginRate()
        this.feeCollection()
        this.partyHome()
        this.deptOrganize()
    },
    beforeDestroy() {
    },
    computed: {
        // 滚动条的配置项
        classOption() {
            return {
                step: 0.1, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
        },
    },
    methods: {
        //新闻点击事件
        newsClick(value) {
            this.$emit('newsImp', value)
        },
        //党组织架构点击事件
        partyClick(value) {
            this.$emit('partyImp', value)
        },
        //园区架构
        deptOrganize() {
            var _this = this
            deptOrganize().then(res => {
                _this.deptOrganizeData = res.data
            }).catch(e => {
            })
        },
        //党群动态
        partyHome() {
            var _this = this
            var params = {
                'pageNum': '1',
                'pageSize': '100',
                'type': '1',//1-党群动态 2-党务公开 3-模范风采 4-综合咨询 5-荣誉管理
            }
            partyHome(params).then(res => {
                _this.partyHomeData = res.data
            }).catch(e => {
            })
        },
        //登录率
        loginRate() {
            var _this = this
            loginRate().then(res => {
                _this.loginRateData = res.data
                this.initLoginRate()
            }).catch(e => {
            })
        },
        //党费
        feeCollection() {
            var _this = this
            feeCollection().then(res => {
                _this.feeCollectionData = res.data
                this.initPayment()
            }).catch(e => {
            })
        },
        initLoginRate() {//初始化登录率
            var _this = this
            var loginRateEcharts = require('echarts').init(this.$refs.loginRateEcharts);
            var option = loginRateEcharts.getOption();
            if (option != null) {
                loginRateEcharts.clear();
                loginRateEcharts.setOption(option);
            }
            var seriesData = []
            var legendData = []
            _this.loginRateData.seriesData.forEach(item => {
                item.smooth = true
                seriesData.push(item)
                legendData.push(item.name)
            })

            option = {
                title: {
                    text: "",
                },
                tooltip: {
                    trigger: "axis",
                    position: ['0%', '20%'],
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: "#ffffff" //设置文字颜色
                    },
                },
                legend: {
                    x: 'center',
                    padding: [10, 40, 0, 0],
                    icon: 'rect',
                    itemWidth: 6,
                    itemHeight: 6,
                    textStyle: {
                        color: "#ffffff", //设置文字颜色
                        fontSize: 10,
                    },
                    data: legendData
                },
                grid: {
                    left: "6%",
                    right: "10%",
                    bottom: "10%",
                    top: '25%',
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.loginRateData.xAxisData,
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#ffffff",
                            fontSize: 10
                        },
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'line',
                            color: 'rgba(92,155,181)',
                            width: 1,
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'line',
                            color: 'rgba(92,155,181)',
                            width: 0.1,
                        },
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#ffffff",
                            fontSize: 10
                        },
                    },
                },
                series: seriesData,
            };
            loginRateEcharts.setOption(option);
        },
        initPayment() {//初始化缴费
            var _this = this
            var paymentEcharts = require('echarts').init(this.$refs.paymentEcharts);
            var option = paymentEcharts.getOption();
            if (option != null) {
                paymentEcharts.clear();
                paymentEcharts.setOption(option);
            }

            var seriesData = []
            var legendData = []
            _this.feeCollectionData.seriesData.forEach(function (item, index) {
                seriesData.push(item)
                legendData.push(item.name)
                if (index == 0) {
                    item.barWidth = 20
                    item.stack = "总量"
                    item.itemStyle = {
                        normal: {
                            barBorderRadius: 0,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#FE9948',

                                },
                                {
                                    offset: 1,
                                    color: "#FF5656",
                                },
                            ]),
                        },
                    }
                }
                if (index == 1) {
                    item.barWidth = 20
                    item.stack = "总量"
                    item.barGap = "-100%"
                    item.itemStyle = {
                        normal: {
                            barBorderRadius: 0,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(142,82,209)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(160,80,183)',
                                },
                            ]),
                        },
                    }
                }
            })

            option = {
                grid: {
                    left: "10%",
                    right: "10%",
                    bottom: "10%",
                    top: "10%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    backgroundColor: 'rgba(34, 40, 46, 0.5)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    axisPointer: {
                        type: "none",
                    },
                    textStyle: {
                        color: "#ffffff" //设置文字颜色
                    },
                },
                legend: {
                    x: 'center',
                    padding: [10, 40, 0, 0],
                    icon: 'rect',
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                        color: "#ffffff", //设置文字颜色
                        fontSize: 8,
                    },
                    data: legendData
                },
                backgroundColor: "",
                yAxis: {
                    type: "value",
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#ffffff",
                            fontSize: 10
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'line',
                            color: 'rgba(92,155,181)',
                            width: 0.1,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'line',
                            color: '#2A6FDA',
                            width: 1,
                        },
                    },
                },
                xAxis: [
                    {
                        type: "category",
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#ffffff",
                                fontSize: 10
                            },
                        },
                        data: _this.feeCollectionData.xAxisData,
                    },
                ],
                series: seriesData,
            };
            paymentEcharts.setOption(option);
        },
    }
}
</script>

<style lang="scss">
.el-image__error{
    background-color: rgba(255, 255, 255, 0.6);
}
@import "src/styles/scrollbar.scss";

.height220 {
  height: 220px;
}

</style>
<style lang="scss" scoped>
.height295 {
  height: 295px;
}

.height250 {
  height: 250px;
}

.height322 {
  height: 340px;
}

.rightView {
  height: 660px;
  float: right;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  z-index: 3;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink_r.png");
  }

  .container {
    width: 296px;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_left.png");
    display: flex;
    flex-direction: column;

    &_title1 {
      width: 216px;
      height: 24px;
      margin-top: 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title1.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 11px;
        line-height: 24px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    &_frameworkTitle {
      cursor: pointer;
      width: 171px;
      height: 23px;
      font-size: 12px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #FFFFFF;
      margin-left: 50px;
      margin-top: 20px;
      margin-bottom: 10px;
      line-height: 23px;
      text-align: center;
      position: relative;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title2.png");

      &_icon {
        background-size: 100% 100%;
        width: 16px;
        height: 16px;
        background-image: url("@/assets/main/icon_downarr.png");
        position: absolute;
        right: 10px;
        top: 3px;
      }
    }

    &_frameworkContent {
      width: 200px;
      height: 52px;
      margin-left: 23px;
      padding-left: 57px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_framework.png");
    }

    &_frameworkC {
      //height: 12px;
      max-width: 180px;;
      font-size: 10px;
      font-family: Microsoft YaHei;
      margin-bottom: 5px;
      font-weight: 400;
      color: #1CFDFF;
      line-height: 12px;
    }

    &_frameworkName {
      height: 12px;
      font-size: 8px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      line-height: 12px;
    }

    &_dynamic {
      display: flex;
      cursor: pointer;
      flex-direction: column;
      align-items: center;
      margin-top: 12px;

      &_img {
        width: 242px;
        height: 119px;
        border: 0px solid #FFFFFF;
        border-radius: 5px;
      }

      &_title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 8px;
        min-width: 138px;
        max-width: 242px;
        height: 18px;
        font-size: 10px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 18px;
        text-align: center;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_title2.png");
      }
    }
  }
}

.seamlessStyle {
  height: 220px;
  overflow: hidden;
}

.loginRateStyle {
  width: 88%;
  height: 200px;
  margin-left: 22px;
}

.paymentStyle {
  width: 100%;
  height: 270px;
}

@media screen and (min-width: 2000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }

  .height220 {
    height: calHeight_2k(220px);
  }

  .height295 {
    height: calHeight_2k(295px);
  }

  .height250 {
    height: calHeight_2k(250px);
  }

  .height322 {
    height: calHeight_2k(340px);
  }

  .rightView {
    height: calHeight_2k(660px);
    margin-top: calHeight_2k(20px);

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {

      &_title1 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(30px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }

      }

      &_frameworkTitle {
        height: calHeight_2k(23px);
        margin-top: calHeight_2k(20px);
        margin-bottom: calHeight_2k(10px);
        line-height: calHeight_2k(23px);

        &_icon {
          top: calHeight_2k(6px);
        }

      }

      &_frameworkContent {
        height: calHeight_2k(52px);
        width: calHeight_2k(200px);

      }

      &_frameworkC {
        height: calHeight_2k(12px);
        margin-bottom: calHeight_2k(5px);
        line-height: calHeight_2k(12px);
      }

      &_frameworkName {
        height: calHeight_2k(12px);
        line-height: calHeight_2k(12px);
      }

      &_dynamic {
        margin-top: calHeight_2k(12px);

        &_img {
          height: calHeight_2k(119px);
        }

        &_title {
          margin-top: calHeight_2k(8px);
          height: calHeight_2k(18px);
          line-height: calHeight_2k(18px);
        }
      }
    }
  }

  .seamlessStyle {
    height: calHeight_2k(220px);
  }

  .loginRateStyle {
    height: calHeight_2k(200px);
  }

  .paymentStyle {
    height: calHeight_2k(270px);
  }
}

@media screen and (min-width: 1000px) and (max-width: 1999px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }

  .height220 {
    height: calHeight_2k(220px);
  }

  .height295 {
    height: calHeight_2k(295px);
  }

  .height250 {
    height: calHeight_2k(250px);
  }

  .height322 {
    height: calHeight_2k(340px);
  }

  .rightView {
    height: calHeight_2k(660px);
    margin-top: calHeight_2k(20px);

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {

      &_title1 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(30px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }

      }

      &_frameworkTitle {
        height: calHeight_2k(23px);
        margin-top: calHeight_2k(20px);
        margin-bottom: calHeight_2k(10px);
        line-height: calHeight_2k(23px);

        &_icon {
          top: calHeight_2k(6px);
        }

      }

      &_frameworkContent {
        height: calHeight_2k(40px);
        width: calHeight_2k(140px);
        margin-left: calHeight_2k(10px);
        padding-left: calHeight_2k(40px);
      }

      &_frameworkC {
        height: calHeight_2k(12px);
        margin-bottom: calHeight_2k(5px);
        line-height: calHeight_2k(12px);
      }

      &_frameworkName {
        height: calHeight_2k(12px);
        line-height: calHeight_2k(12px);
      }

      &_dynamic {
        margin-top: calHeight_2k(12px);

        &_img {
          height: calHeight_2k(119px);
        }

        &_title {
          margin-top: calHeight_2k(8px);
          height: calHeight_2k(18px);
          line-height: calHeight_2k(18px);
        }
      }
    }
  }

  .seamlessStyle {
    height: calHeight_2k(220px);
  }

  .loginRateStyle {
    height: calHeight_2k(200px);
  }

  .paymentStyle {
    height: calHeight_2k(270px);
  }
}
</style>
